<template>
    <div class="search-container">
        <a-layout>
            <a-layout-header class="search-header">
                <div class="header-content">
                    <div class="search-area">
                        <div class="search-bar">
                            <a-input-search v-model="searchKeyword" placeholder="请输入商品名称" size="large"
                                @search="handleSearch" :loading="loading" />
                        </div>
                    </div>
                    <div class="header-right-area">
                        <a-button class="header-white-area" type="text" @click="handleOpenShop">
                            <span class="white-area-text">我的店铺</span>
                        </a-button>
                        <div class="header-pink-area"></div>
                    </div>
                </div>
            </a-layout-header>

            <a-layout-content class="search-content">
                <div class="content-wrapper">
                    <a-empty v-if="!hasSearched" description="请输入关键词开始搜索" />

                    <div v-else-if="loading" class="loading-container">
                        <a-spin size="large" />
                    </div>

                    <div v-else-if="searchResults.length === 0" class="no-results">
                        <a-empty description="未找到相关商品" />
                    </div>

                    <div v-else class="results-grid">
                        <div v-for="item in searchResults" :key="item.id" class="product-card">
                            <a-card hoverable>
                                <template #cover>
                                    <img :src="item.image" :alt="item.name" />
                                </template>
                                <a-card-meta :title="item.name" :description="item.description" />
                                <div class="product-price">¥{{ item.price }}</div>
                            </a-card>
                        </div>
                    </div>
                </div>
            </a-layout-content>

            <a-layout-footer class="search-footer">
                <div class="footer-content">
                    <p>© 2024 惠购商城 - 让购物更简单</p>
                </div>
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { Message } from '@arco-design/web-vue'

const router = useRouter()
const userStore = useUserStore()

const searchKeyword = ref('')
const loading = ref(false)
const hasSearched = ref(false)
const searchResults = ref([])

const handleSearch = async (keyword) => {
    if (!keyword.trim()) return

    // 搜索功能不再强制要求登录，所有用户都可以使用搜索
    loading.value = true
    hasSearched.value = true

    // 模拟搜索请求
    setTimeout(() => {
        // 模拟搜索结果
        searchResults.value = [
            {
                id: 1,
                name: '苹果手机',
                description: '最新款iPhone，性能强劲',
                price: '6999',
                image: 'https://via.placeholder.com/200x200/4f46e5/ffffff?text=iPhone'
            },
            {
                id: 2,
                name: '华为笔记本',
                description: '轻薄便携，办公首选',
                price: '4999',
                image: 'https://via.placeholder.com/200x200/7c3aed/ffffff?text=华为'
            },
            {
                id: 3,
                name: '小米电视',
                description: '4K超清，家庭影院体验',
                price: '2999',
                image: 'https://via.placeholder.com/200x200/ec4899/ffffff?text=小米'
            }
        ]
        loading.value = false
    }, 1000)
}

const handleOpenShop = () => {
    // 店铺功能需要登录检查
    if (!userStore.isLoggedIn) {
        Message.warning('请先登录后再访问店铺功能')
        router.push('/login')
        return
    }

    // 直接打开店铺管理页面
    window.open('/shop', '_blank')
}
</script>

<style scoped>
.search-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    flex-direction: column;
}

.search-container>.arco-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.search-header {
    background-color: #001529;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 18px 0;
    height: auto;
    position: relative;
}



.header-content {
    position: relative;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-area {
    flex: 1;
    text-align: center;
}

.search-bar {
    max-width: 600px;
    margin: 0 auto;
}

.header-pink-area {
    width: 120px;
    height: 45px;
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    border-radius: 8px;
    margin-left: 24px;
}

.header-white-area {
    width: 120px;
    height: 45px;
    background: white;
    border-radius: 8px;
    margin-left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    outline: none;
}

.header-white-area:hover {
    background: #f8f9fa;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    border-color: transparent;
}

.header-white-area:active {
    background: #d6e9f7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
}

.white-area-text {
    color: #333;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-white-area:hover .white-area-text {
    color: #333;
    transform: scale(1.05);
}

.header-right-area {
    display: flex;
    margin-left: auto;
    margin-right: -200px;
}

.search-content {
    padding: 40px 24px;
    flex: 1;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.no-results {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.product-card {
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
}

.product-price {
    font-size: 20px;
    font-weight: 600;
    color: #ff5722;
    margin-top: 12px;
    text-align: center;
}

.search-footer {
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding: 24px 0;
    margin-top: auto;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-content p {
    margin: 0;
    color: #86909c;
    font-size: 14px;
}

@media (max-width: 768px) {

    .search-header,
    .search-content,
    .search-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .search-title {
        font-size: 24px;
    }

    .results-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }
}
</style>